<template>
  <div class="city-elevator" v-loading="loading">
    <!-- 选择城市 -->
    <div class="flex-display">
      <label class="title-label" style="width: 100px;margin: 0;padding-left: 0px;">请选择市：</label>
      <i class="el-icon-arrow-left scroll-left" :class="{'disable-scroll-left': disableScrollLeft}" @click="scrollLeft"></i>
      <el-scrollbar ref="cityScrollBar" style="width: 100%;margin: 5px;">
        <div class="flex-display scroll-content-wrapper" style="flex-direction: row;">
          <template v-if="multiple">
            <el-checkbox-group v-model="checkedCities" @change="checkedCitiesGroupChange">
              <el-checkbox v-for="cityItem in cities" :label="cityItem.cityId" :indeterminate="cityItem.indeterminate" :key="cityItem.cityId" @change="checked => checkedCityItemChange(checked, cityItem.cityId)">
                <span @click.stop.prevent="clickCityItemName(cityItem)" :class="{'clicked': cityItem.clicked}">{{cityItem.cityName}}</span>
              </el-checkbox>
            </el-checkbox-group>
          </template>
          <template v-else>
            <div v-for="cityItem in cities" :key="cityItem.cityId" class="single-city">
              <span @click.stop.prevent="clickCityItemName(cityItem)" :class="{'clicked': cityItem.clicked}">{{cityItem.cityName}}</span>
            </div>
          </template>
        </div>
      </el-scrollbar>
      <i class="el-icon-arrow-right scroll-right" :class="{'disable-scroll-right': disableScrollRight}" @click="scrollRight"></i>
    </div>

    <div class="flex-display select-columns" :class="{'columns4': showElevator, 'columns3': !showElevator}" style="width: 100%;margin-top: 5px;align-items: flex-start;">
      <!-- 区/县 -->
      <div class="flex-display area_toolbar" style="flex-direction: column;">
        <div class="title-wrapper">
          <label class="title-label">选择区/县</label>
        </div>
        <el-input clearable style="padding: 0 10px;" placeholder="请输入区/县名称搜索" v-model="searchCounty"
          @clear="handleSearchCounty">
          <el-button slot="append" icon="el-icon-search" @click="handleSearchCounty"></el-button>
        </el-input>
        <div class="list" style="margin-top: 5px;">
          <template v-if="counties.length">
            <template v-if="multiple">
              <el-checkbox-group class="column-srcoll-wrapper" v-model="checkedCounties" @change="checkedCountiesGroupChange">
                <el-checkbox class="column-item-wrapper" v-for="countyItem in counties" :class="{'highlighted': countyItem.clicked}" :label="countyItem.cityId" :indeterminate="countyItem.indeterminate" :key="countyItem.cityId" @change="checked => checkedCountyItemChange(checked, countyItem.cityId)">
                  <span @click.stop.prevent="clickCountyItemName(countyItem)" :class="{'clicked': countyItem.clicked}">{{countyItem.cityName}}</span>
                </el-checkbox>
              </el-checkbox-group>
            </template>
            <template v-else>
              <div class="column-srcoll-wrapper">
                <div v-for="countyItem in counties" :key="countyItem.cityId" class="single-list" :class="{'highlighted': countyItem.clicked}">
                  <span @click.stop.prevent="clickCountyItemName(countyItem)" :class="{'clicked': countyItem.clicked}">{{countyItem.cityName}}</span>
                </div>
              </div>
            </template>
          </template>
          <template v-else>
            <div class="empty-list">
              暂无数据
            </div>
          </template>
        </div>
      </div>
      <!-- 街道/乡镇 -->
      <div class="flex-display area_toolbar" style="flex-direction: column;">
        <div class="title-wrapper">
          <label class="title-label">选择街道/乡镇</label>
        </div>
        <el-input clearable style="padding: 0 10px;" placeholder="请输入街道/乡镇名称搜索" v-model="searchVillage"
          @clear="handleSearchVillage">
          <el-button slot="append" icon="el-icon-search" @click="handleSearchVillage"></el-button>
        </el-input>
        <div class="list" style="margin-top: 5px;">
          <template v-if="villages.length">
            <template v-if="multiple">
              <el-checkbox-group class="column-srcoll-wrapper" v-model="checkedVillages" @change="checkedVillagesGroupChange">
                <el-checkbox class="column-item-wrapper" v-for="villageItem in villages" :class="{'highlighted': villageItem.clicked}" :label="villageItem.cityId" :indeterminate="villageItem.indeterminate" :key="villageItem.cityId" @change="checked => checkedVillageItemChange(checked, villageItem.cityId)">
                  <span @click.stop.prevent="clickVillageItemName(villageItem)" :class="{'clicked': villageItem.clicked}">{{villageItem.cityName}}</span>
                </el-checkbox>
              </el-checkbox-group>
            </template>
            <template v-else>
              <div class="column-srcoll-wrapper">
                <div v-for="villageItem in villages" :key="villageItem.cityId" class="single-list" :class="{'highlighted': villageItem.clicked}">
                  <span @click.stop.prevent="clickVillageItemName(villageItem)" :class="{'clicked': villageItem.clicked}">{{villageItem.cityName}}</span>
                </div>
              </div>
            </template>
          </template>
          <template v-else>
            <div class="empty-list">
              暂无数据
            </div>
          </template>
        </div>
      </div>
      <!-- 小区 -->
      <div class="flex-display area_toolbar" style="flex-direction: column;">
        <div class="title-wrapper">
          <label class="title-label">选择小区</label>
        </div>
        <el-input clearable style="padding: 0 10px;" placeholder="请输入小区名称搜索" v-model="searchEstate"
          @clear="handleSearchEstate">
          <el-button slot="append" icon="el-icon-search" @click="handleSearchEstate"></el-button>
        </el-input>
        <div class="list" style="margin-top: 5px;">
          <template v-if="estates.length">
            <template v-if="multiple">
              <el-checkbox-group class="column-srcoll-wrapper" v-model="checkedEstates" @change="checkedEstatesGroupChange">
                <el-checkbox
                  class="column-item-wrapper"
                  v-for="estateItem in estates"
                  :class="{'highlighted': estateItem.clicked && showElevator}"
                  :label="estateItem.estateId"
                  :indeterminate="estateItem.indeterminate"
                  :key="estateItem.estateId"
                  @change="checked => checkedEstateItemChange(checked, estateItem)"
                >
                  <span @click.stop.prevent="clickEstateItemName(estateItem)" :class="{'clicked': estateItem.clicked && showElevator}">{{estateItem.estateName}}</span>
                </el-checkbox>
              </el-checkbox-group>
            </template>
            <template v-else>
              <div class="column-srcoll-wrapper">
                <div v-for="estateItem in estates" :key="estateItem.estateId" class="single-list" :class="{'highlighted': estateItem.clicked}">
                  <span @click.stop.prevent="clickEstateItemName(estateItem)" :class="{'clicked': estateItem.clicked && showElevator}">{{estateItem.estateName}}</span>
                </div>
              </div>
            </template>
          </template>
          <template v-else>
            <div class="empty-list">
              暂无数据
            </div>
          </template>
        </div>
      </div>
      <!-- 电梯 -->
      <div v-if="showElevator" class="flex-display area_toolbar" style="flex-direction: column;">
        <div class="title-wrapper">
          <label class="title-label">选择电梯</label>
        </div>
        <el-input clearable style="padding: 0 10px;" placeholder="请输入电梯名称搜索" v-model="searchElevator"
          @clear="handleSearchElevator">
          <el-button slot="append" icon="el-icon-search" @click="handleSearchElevator"></el-button>
        </el-input>
        <div class="list" style="margin-top: 5px;">
          <template v-if="elevators.length">
            <template v-if="multiple">
              <el-checkbox-group class="column-srcoll-wrapper" v-model="checkedElevators" @change="checkedElevatorsGroupChange">
                <el-checkbox class="column-item-wrapper" v-for="elevatorItem in elevators" :label="elevatorItem.elevatorId" :indeterminate="elevatorItem.indeterminate" :key="elevatorItem.elevatorId" @change="checked => checkedElevatorItemChange(checked, elevatorItem.elevatorId)">
                  <span @click.stop.prevent="clickElevatorItemName(elevatorItem)" :class="{'clicked': elevatorItem.clicked}">{{elevatorItem.elevatorName}}</span>
                </el-checkbox>
              </el-checkbox-group>
            </template>
            <template v-else>
              <div class="column-srcoll-wrapper">
                <div v-for="elevatorItem in elevators" :key="elevatorItem.elevatorId" class="single-list" :class="{'highlighted': elevatorItem.clicked}">
                  <span @click.stop.prevent="clickElevatorItemName(elevatorItem)" :class="{'clicked': elevatorItem.clicked}">{{elevatorItem.elevatorName}}</span>
                </div>
              </div>
            </template>
          </template>
          <template v-else>
            <div class="empty-list">
              暂无数据
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DetailAction from '@/views/_mixins/detail-action';
import {
  add,
  edit,
  detail
} from "@/api/elevator-device-management/blackBox/index";
import {
  elevatorSelect
} from "@/api/elevator-select-info/index"

export default {
  name: 'ItemDetail',
  mixins: [DetailAction],
  components: {
  },
  props: {
    multiple: {
      type: Boolean,
      default: true,
    },
    showElevator: {
      type: Boolean,
      default: true,
    },
    queryIds: {
      tyep: Array,
      default: () => [],
    }
  },
  data() {
    return {
      firstMounted: true,
      loading: false,

      disableScrollRight: false,
      disableScrollLeft: true,

      cities: [], //城市
      counties: [], //区/县
      villages: [], //乡镇
      estates: [], //小区
      elevators: [], //电梯

      checkedCities: [],
      checkedCounties: [],
      checkedVillages: [],
      checkedEstates: [],
      checkedElevators: [],

      originCities: [], //城市
      originCounties: [], //区/县
      originVillages: [], //乡镇
      originEstates: [], //小区
      originElevators: [], //电梯

      currentCity: null, //城市
      currentCounty: null, //区/县
      currentVillage: null, //乡镇
      currentEstate: null, //小区
      currentElevator: null, //电梯

      searchCity: null, //城市
      searchCounty: '', //区/县
      searchVillage: '', //乡镇
      searchEstate: '', //小区
      searchElevator: '', //电梯

      btnCancel: {
        name: "取消",
        type: "cancel",
        bgColor: "#2B2B2C",
      },
      btnOk: {
        name: "确定",
        type: "ok",
      },
    };
  },
  computed: {
  },
  created() {},
  mounted() {
    this.listCities(undefined, this.queryIds);
  },
  watch: {
    // 用于联动从小区到街道/乡镇的 indeterminate，电梯到小区的联动，参考电梯的chekbox group change事件
    estates: {
      handler(newVal, oldVal) {
        if (newVal && newVal.length) {
          const inds = newVal.filter(item => item.indeterminate === true);
          const parentVillage = this.villages.find(item => item.cityId === this.currentVillage.cityId);

          if (inds.length) {
            this.$set(parentVillage, 'indeterminate', true);
            this.$set(parentVillage, 'checked', false);
          }
        }
      },
      deep: true,
    },
    // 用于联动从街道/乡镇到区/县的 indeterminate
    villages: {
      handler(newVal, oldVal) {
        if (newVal && newVal.length) {
          const inds = newVal.filter(item => item.indeterminate === true);

          if (inds.length) {
            const parentCounty = this.counties.find(item => item.cityId === this.currentCounty.cityId);
            this.$set(parentCounty, 'indeterminate', true);
            this.$set(parentCounty, 'checked', false);
          }
        }
      },
      deep: true,
    },
    // 用于联动从区/县到市的 indeterminate
    counties: {
      handler(newVal, oldVal) {
        if (newVal && newVal.length) {
          const inds = newVal.filter(item => item.indeterminate === true);

          if (inds.length) {
            const parentCity = this.cities.find(item => item.cityId === this.currentCity.cityId);
            this.$set(parentCity, 'indeterminate', true);
            this.$set(parentCity, 'checked', false);
          }
        }
      },
      deep: true,
    },
  },
  methods: {
    getCheckedEstates() {
      let checkedEstates = [];

      this.cities.forEach(city => {
        if (city.counties && city.counties.length) {
          city.counties.forEach(county => {
            county.villages.forEach(village => {
              if (village.estates && village.estates.length) {
                village.estates.forEach(estate => {
                  // 全选或者半选
                  if (estate.checked || estate.indeterminate) {
                    checkedEstates.push(estate);
                  }
                })
              }
            })
          })
        }
      })

      return checkedEstates;
    },
    getCheckedElevators() {
      let checkedElevators = [];

      this.cities.forEach(city => {
        if (city.counties && city.counties.length) {
          city.counties.forEach(county => {
            county.villages.forEach(village => {
              if (village.estates && village.estates.length) {
                village.estates.forEach(estate => {
                  if (estate.elevators && estate.elevators.length) {
                    estate.elevators.forEach(elevator => {
                      if (elevator.checked) {
                        checkedElevators.push(elevator);
                      }
                    })
                  }
                })
              }
            })
          })
        }
      })

      return checkedElevators;
    },
    getSelectedElevator() {
      let elevatorObj = {};

      this.cities.forEach(city => {
        if (city.clicked && city.counties && city.counties.length) {
          elevatorObj['city'] = city;

          city.counties.forEach(county => {
            if (county.clicked && county.villages && county.villages.length) {
              elevatorObj['county'] = county;

              county.villages.forEach(village => {
                if (village.clicked && village.estates && village.estates.length) {
                  elevatorObj['village'] = village;

                  village.estates.forEach(estate => {
                    if (estate.clicked && estate.elevators && estate.elevators.length) {
                      elevatorObj['estate'] = estate;

                      estate.elevators.forEach(elevator => {
                        if (elevator.clicked) {
                          elevatorObj['elevator'] = elevator;
                        }
                      })
                    }
                  })
                }
              })
            }
          })
        }
      });

      return elevatorObj;
    },
    checkedElevatorsGroupChange(val) {
      const levelCity = this.cities.find(item => item.cityId === this.currentCity.cityId);
      const levelCounty = levelCity.counties.find(item => item.cityId === this.currentCounty.cityId);
      const levelVillage = levelCounty.villages.find(item => item.cityId === this.currentVillage.cityId);
      const levelEstate = levelVillage.estates.find(item => item.estateId === this.currentEstate.estateId);
      const parentEstate = this.estates.find(item => item.estateId === this.currentEstate.estateId);

      if (val.length) {
        if (levelEstate.elevators.length === val.length) {
          if (!this.checkedEstates.find(item => item === this.currentEstate.estateId)) {
            this.$set(this.checkedEstates, this.checkedEstates.length, this.currentEstate.estateId);
            this.checkedEstatesGroupChange(this.checkedEstates);

            this.$set(parentEstate, 'checked', true);
            this.$set(parentEstate, 'indeterminate', false);

            this.$set(levelEstate, 'checked', true);
            this.$set(levelEstate, 'indeterminate', false);
          }
        } else if (levelEstate.elevators.length > val.length) {
          this.checkedEstates = this.checkedEstates.filter(item => item !== this.currentEstate.estateId);

          this.$set(parentEstate, 'checked', false);
          this.$set(parentEstate, 'indeterminate', true);

          this.$set(levelEstate, 'checked', false);
          this.$set(levelEstate, 'indeterminate', true);
        }
      } else {
        this.checkedEstates = this.checkedEstates.filter(item => item !== this.currentEstate.estateId);
        this.checkedEstatesGroupChange(this.checkedEstates);

        this.$set(parentEstate, 'checked', false);
        this.$set(parentEstate, 'indeterminate', false);

        this.$set(levelEstate, 'checked', false);
        this.$set(levelEstate, 'indeterminate', false);
      }
    },
    checkedElevatorItemChange(checked, elevatorId) {
      const levelCity = this.cities.find(item => item.cityId === this.currentCity.cityId);
      const levelCounty = levelCity.counties.find(item => item.cityId === this.currentCounty.cityId);
      const levelVillage = levelCounty.villages.find(item => item.cityId === this.currentVillage.cityId);
      const levelEstate = levelVillage.estates.find(item => item.estateId === this.currentEstate.estateId);

      const matched = levelEstate.elevators.find(item => item.elevatorId === elevatorId);
      this.$set(matched,'checked', checked);

      const originMatched = this.originElevators.find(item => item.elevatorId === elevatorId);
      this.$set(originMatched,'checked', checked);
    },
    clickElevatorItemName(elevatorItem) {
      if (!this.multiple) {
        const levelCity = this.cities.find(item => item.cityId === this.currentCity.cityId);
        const levelCounty = levelCity.counties.find(item => item.cityId === this.currentCounty.cityId);
        const levelVillage = levelCounty.villages.find(item => item.cityId === this.currentVillage.cityId);
        const levelEstate = levelVillage.estates.find(item => item.estateId === this.currentEstate.estateId);

        if (levelEstate.elevators && levelEstate.elevators.length) {
          this.elevators = levelEstate.elevators;

          this.elevators.forEach(item => {
            if (item.elevatorId === elevatorItem.elevatorId) {
              this.$set(item, 'clicked', true);
            } else {
              this.$set(item, 'clicked', false);
            }
          });
        }
      }
    },
    queryElevator(elevatorItem) {
      this.currentElevator = elevatorItem;
    },
    checkedEstatesGroupChange(val) {
      this.checkedEstates = val;

      const levelCity = this.cities.find(item => item.cityId === this.currentCity.cityId);
      const levelCounty = levelCity.counties.find(item => item.cityId === this.currentCounty.cityId);
      const levelVillage = levelCounty.villages.find(item => item.cityId === this.currentVillage.cityId);
      const parentVillage = this.villages.find(item => item.cityId === this.currentVillage.cityId);

      if (val.length) {
        if (levelVillage.estates.length === val.length) {
          if (!this.checkedVillages.find(item => item === this.currentVillage.cityId)) {
            this.$set(this.checkedVillages, this.checkedVillages.length, this.currentVillage.cityId);
            this.checkedVillagesGroupChange(this.checkedVillages);

            this.$set(parentVillage, 'checked', true);
            this.$set(parentVillage, 'indeterminate', false);

            this.$set(levelVillage, 'checked', true);
            this.$set(levelVillage, 'indeterminate', false);
          }
        } else if (levelVillage.estates.length > val.length) {
          this.checkedVillages = this.checkedVillages.filter(item => item !== this.currentVillage.cityId);

          this.$set(parentVillage, 'checked', false);
          this.$set(parentVillage, 'indeterminate', true);

          this.$set(levelVillage, 'checked', false);
          this.$set(levelVillage, 'indeterminate', true);
        }
      } else {
        this.checkedVillages = this.checkedVillages.filter(item => item !== this.currentVillage.cityId);
        this.checkedVillagesGroupChange(this.checkedVillages);

        this.$set(parentVillage, 'checked', false);
        this.$set(parentVillage, 'indeterminate', false);

        this.$set(levelVillage, 'checked', false);
        this.$set(levelVillage, 'indeterminate', false);
      }
    },
    checkedEstateItemChange(checked, estateItem) {
      const levelCity = this.cities.find(item => item.cityId === this.currentCity.cityId);
      const levelCounty = levelCity.counties.find(item => item.cityId === this.currentCounty.cityId);
      const levelVillage = levelCounty.villages.find(item => item.cityId === this.currentVillage.cityId);
      const levelEstate = levelVillage.estates.find(item => item.estateId === estateItem.estateId);
      const viewEstate = this.estates.find(item => item.estateId === estateItem.estateId);

      this.$set(levelEstate,'checked', checked);
      this.$set(levelEstate, 'indeterminate', false);

      this.$set(viewEstate,'checked', checked);
      this.$set(viewEstate, 'indeterminate', false);

      if (this.showElevator) {
        if (estateItem.estateId === this.currentEstate.estateId) {
          if (checked) {
            this.checkedElevators = this.elevators.map(item => {return item.elevatorId});
          } else {
            this.checkedElevators = [];
          }

          viewEstate.elevators.forEach((item, index) => {
            this.$set(viewEstate.elevators[index], 'checked', checked);
            this.$set(viewEstate.elevators[index], 'indeterminate', false);
          });

          levelEstate.elevators.forEach((item, index) => {
            this.$set(levelEstate.elevators[index], 'checked', checked);
            this.$set(levelEstate.elevators[index], 'indeterminate', false);
          });

          this.originElevators = JSON.parse(JSON.stringify(levelEstate.elevators));
        } else {
          levelEstate.elevators.forEach((item, index) => {
            this.$set(levelEstate.elevators[index], 'checked', checked);
            this.$set(levelEstate.elevators[index], 'indeterminate', false);
          });
        }
      }
    },
    clickEstateItemName(estateItem) {
      if (!this.showElevator) {
        return;
      }

      this.currentEstate = estateItem;
      const levelCity = this.cities.find(item => item.cityId === this.currentCity.cityId);
      const levelCounty = levelCity.counties.find(item => item.cityId === this.currentCounty.cityId);
      const levelVillage = levelCounty.villages.find(item => item.cityId === this.currentVillage.cityId);
      const levelEstate = levelVillage.estates.find(item => item.estateId === this.currentEstate.estateId);

      this.elevators = levelEstate.elevators;
      this.checkedElevators = levelEstate.elevators.filter(item => item.checked === true).map(item => {return item.elevatorId});
      this.originElevators = JSON.parse(JSON.stringify(levelEstate.elevators));

      this.estates.forEach((item, index) => {
        if (item.estateId === estateItem.estateId) {
          this.$set(this.estates[index], 'clicked', true);
        } else {
          this.$set(this.estates[index], 'clicked', false);
        }
      });

      this.queryEstate(estateItem);
    },
    queryEstate(estateItem) {
      const levelCity = this.cities.find(item => item.cityId === this.currentCity.cityId);
      const levelCounty = levelCity.counties.find(item => item.cityId === this.currentCounty.cityId);
      const levelVillage = levelCounty.villages.find(item => item.cityId === this.currentVillage.cityId);
      const levelEstate = levelVillage.estates.find(item => item.estateId === estateItem.estateId);

      this.currentEstate = levelEstate;

      if (levelEstate.elevators) {
        this.elevators = JSON.parse(JSON.stringify(levelEstate.elevators));
        this.originElevators = JSON.parse(JSON.stringify(this.elevators));
      }
    },

    checkedVillagesGroupChange(val) {
      const levelCity = this.cities.find(item => item.cityId === this.currentCity.cityId);
      const levelCounty = levelCity.counties.find(item => item.cityId === this.currentCounty.cityId);
      const parentCounty = this.counties.find(item => item.cityId === this.currentCounty.cityId);

      if (val.length) {
        if (levelCounty.villages.length === val.length) {
          if (!this.checkedCounties.find(item => item === this.currentCounty.cityId)) {
            this.$set(this.checkedCounties, this.checkedCounties.length, this.currentCounty.cityId);
            this.checkedCountiesGroupChange(this.checkedCounties);

            this.$set(parentCounty, 'checked', true);
            this.$set(parentCounty, 'indeterminate', false);

            this.$set(levelCounty, 'checked', true);
            this.$set(levelCounty, 'indeterminate', false);
          }
        } else if (levelCounty.villages.length > val.length) {
          this.checkedCounties = this.checkedCounties.filter(item => item !== this.currentCounty.cityId);

          this.$set(parentCounty, 'checked', false);
          this.$set(parentCounty, 'indeterminate', true);

          this.$set(levelCounty, 'checked', false);
          this.$set(levelCounty, 'indeterminate', true);
        }
      } else {
        this.checkedCounties = this.checkedCounties.filter(item => item !== this.currentCounty.cityId);
        this.checkedCountiesGroupChange(this.checkedCounties);

        this.$set(parentCounty, 'checked', false);
        this.$set(parentCounty, 'indeterminate', false);

        this.$set(levelCounty, 'checked', false);
        this.$set(levelCounty, 'indeterminate', false);
      }
    },
    checkedVillageItemChange(checked, cityId) {
      const levelCity = this.cities.find(item => item.cityId === this.currentCity.cityId);
      const levelCounty = levelCity.counties.find(item => item.cityId === this.currentCounty.cityId);
      const levelVillage = levelCounty.villages.find(item => item.cityId === cityId);
      const viewVillage = this.villages.find(item => item.cityId === cityId);

      this.$set(levelVillage,'checked', checked);
      this.$set(levelVillage, 'indeterminate', false);

      this.$set(viewVillage,'checked', checked);
      this.$set(viewVillage, 'indeterminate', false);

      if (cityId === this.currentVillage.cityId) {
        if (checked) {
          this.checkedEstates = this.estates.map(item => {return item.estateId});
          this.checkedElevators = this.elevators.map(item => {return item.elevatorId});
        } else {
          this.checkedEstates = [];
          this.checkedElevators = [];
        }

        levelVillage.estates.forEach((estate, index) => {
          this.$set(levelVillage.estates[index], 'checked', checked);
          this.$set(levelVillage.estates[index], 'indeterminate', false);

          if (estate.elevators && estate.elevators.length) {
            estate.elevators.forEach((item, index) => {
              this.$set(item, 'checked', checked);
              this.$set(item, 'indeterminate', false);
            });
          }
        });

        viewVillage.estates.forEach((item, index) => {
          this.$set(viewVillage.estates[index], 'checked', checked);
          this.$set(viewVillage.estates[index], 'indeterminate', false);
        });

        this.originEstates = JSON.parse(JSON.stringify(levelVillage.estates));
      } else {
        levelVillage.estates.forEach((estate, index) => {
          this.$set(levelVillage.estates[index], 'checked', checked);
          this.$set(levelVillage.estates[index], 'indeterminate', false);

          if (estate.elevators && estate.elevators.length) {
            estate.elevators.forEach((item, index) => {
              this.$set(item, 'checked', checked);
              this.$set(item, 'indeterminate', false);
            });
          }
        });

        this.originEstates = JSON.parse(JSON.stringify(levelVillage.estates));
      }
    },
    clickVillageItemName(villageItem) {
      this.villages.forEach((item, index) => {
        if (item.cityId === villageItem.cityId) {
          this.$set(this.villages[index], 'clicked', true);
        } else {
          this.$set(this.villages[index], 'clicked', false);
        }
      });

      this.queryVillage(villageItem);
    },
    queryVillage(villageItem) {
      this.resetEstate();
      this.resetElevator();

      this.currentVillage = villageItem;

      if (villageItem && villageItem.estates) {
        this.estates = villageItem.estates;
        this.checkedEstates = villageItem.estates.filter(item => item.checked === true).map(item => {return item.estateId});

        if (this.estates && this.estates[0] && this.estates[0].elevators) {
          this.elevators = this.estates[0].elevators;
          this.originElevators = JSON.parse(JSON.stringify(this.elevators));
          this.checkedElevators = this.estates[0].elevators.filter(item => item.checked === true).map(item => {return item.elevatorId});
        }

        this.estates.forEach((item, index) => {
          if (index === 0) {
            this.$set(this.estates[index], 'clicked', true);
            this.currentEstate = this.estates[index];
          } else {
            this.$set(this.estates[index], 'clicked', false);
          }
        });
      }
    },

    checkedCountiesGroupChange(val) {
      const levelCity = this.cities.find(item => item.cityId === this.currentCity.cityId);

      if (val.length) {
        if (levelCity.counties.length === val.length) {
          if (!this.checkedCities.find(item => item === this.currentCity.cityId)) {
            this.$set(this.checkedCities, this.checkedCities.length, this.currentCity.cityId);
            this.checkedCitiesGroupChange(this.checkedCities);

            this.$set(levelCity, 'checked', true);
            this.$set(levelCity, 'indeterminate', false);
          }
        } else if (levelCity.counties.length > val.length) {
          this.checkedCities = this.checkedCities.filter(item => item !== this.currentCity.cityId);

          this.$set(levelCity, 'checked', false);
          this.$set(levelCity, 'indeterminate', true);
        }
      } else {
        this.checkedCities = this.checkedCities.filter(item => item !== this.currentCity.cityId);
        this.checkedCitiesGroupChange(this.checkedCities);

        this.$set(levelCity, 'checked', false);
        this.$set(levelCity, 'indeterminate', false);
      }
    },
    checkedCountyItemChange(checked, cityId) {
      const levelCity = this.cities.find(item => item.cityId === this.currentCity.cityId);
      const levelCounty = levelCity.counties.find(item => item.cityId === cityId);
      const viewCounty = this.counties.find(item => item.cityId === cityId);

      this.$set(levelCounty,'checked', checked);
      this.$set(levelCounty, 'indeterminate', false);

      this.$set(viewCounty,'checked', checked);
      this.$set(viewCounty, 'indeterminate', false);

      if (cityId === this.currentCounty.cityId) {
        if (checked) {
          this.checkedVillages = this.villages.map(item => {return item.cityId});
          this.checkedEstates = this.estates.map(item => {return item.estateId});
          this.checkedElevators = this.elevators.map(item => {return item.elevatorId});
        } else {
          this.checkedVillages = [];
          this.checkedEstates = [];
          this.checkedElevators = [];
        }

        levelCounty.villages.forEach((village, index) => {
          this.$set(village, 'checked', checked);
          this.$set(village, 'indeterminate', false);

          if (village.estates && village.estates.length) {
            village.estates.forEach((estate, index) => {
              this.$set(estate, 'checked', checked);
              this.$set(estate, 'indeterminate', false);

              if (estate.elevators && estate.elevators.length) {
                estate.elevators.forEach((item, index) => {
                  this.$set(item, 'checked', checked);
                  this.$set(item, 'indeterminate', false);
                });
              }
            });
          }
        });

        viewCounty.villages.forEach((village, index) => {
          this.$set(village, 'checked', checked);
          this.$set(village, 'indeterminate', false);

          if (village.estates && village.estates.length) {
            village.estates.forEach((estate, index) => {
              this.$set(estate, 'checked', checked);
              this.$set(estate, 'indeterminate', false);

              if (estate.elevators && estate.elevators.length) {
                estate.elevators.forEach((item, index) => {
                  this.$set(item, 'checked', checked);
                  this.$set(item, 'indeterminate', false);
                });
              }
            });
          }
        });

        this.originVillages = JSON.parse(JSON.stringify(levelCounty.villages));
      } else {
        levelCounty.villages.forEach((village, index) => {
          this.$set(village, 'checked', checked);
          this.$set(village, 'indeterminate', false);

          if (village.estates && village.estates.length) {
            village.estates.forEach((estate, index) => {
              this.$set(estate, 'checked', checked);
              this.$set(estate, 'indeterminate', false);

              if (estate.elevators && estate.elevators.length) {
                estate.elevators.forEach((item, index) => {
                  this.$set(item, 'checked', checked);
                  this.$set(item, 'indeterminate', false);
                });
              }
            });
          }
        });

        this.originVillages = JSON.parse(JSON.stringify(levelCounty.villages));
      }
    },
    clickCountyItemName(countyItem) {
      this.counties.forEach((item, index) => {
        if (item.cityId === countyItem.cityId) {
          this.$set(this.counties[index], 'clicked', true);
        } else {
          this.$set(this.counties[index], 'clicked', false);
        }
      });

      this.queryCounty(countyItem);
    },
    queryCounty(countyItem) {
      console.log('dd:', countyItem)
      this.resetVillage();
      this.resetEstate();
      this.resetElevator();

      this.currentCounty = countyItem;

      if (countyItem.villages) {
        this.villages = countyItem.villages;
        this.checkedVillages = countyItem.villages.filter(item => item.checked === true).map(item => {return item.cityId});
        this.originVillages = JSON.parse(JSON.stringify(this.villages));

        const villageItem = this.villages[0]

        this.villages.forEach((item, index) => {
          if (index === 0) {
            this.$set(item, 'clicked', true);
            this.currentVillage = item;
          } else {
            this.$set(item, 'clicked', false);
          }
        });

        if (villageItem.estates) {
          this.estates = villageItem.estates;
          this.originEstates = JSON.parse(JSON.stringify(this.estates));
          this.checkedEstates = villageItem.estates.filter(item => item.checked === true).map(item => {return item.estateId});

          if (this.estates && this.estates[0] && this.estates[0].elevators) {
            this.elevators = this.estates[0].elevators;
            this.originElevators = JSON.parse(JSON.stringify(this.elevators));
            this.checkedElevators = this.estates[0].elevators.filter(item => item.checked === true).map(item => {return item.elevatorId});
          }

          this.estates.forEach((item, index) => {
            if (index === 0) {
              this.$set(this.estates[index], 'clicked', true);
              this.currentEstate = this.estates[index];
            } else {
              this.$set(this.estates[index], 'clicked', false);
            }
          });
        }
      }
    },

    checkedCitiesGroupChange(val) {
    },
    checkedCityItemChange(checked, cityId) {
      const levelCity = this.cities.find(item => item.cityId === cityId);

      this.$set(levelCity,'checked', checked);
      this.$set(levelCity, 'indeterminate', false);

      if (cityId === this.currentCity.cityId) {
        if (checked) {
          this.checkedCounties = this.counties.map(item => {return item.cityId});
          this.checkedVillages = this.villages.map(item => {return item.cityId});
          this.checkedEstates = this.estates.map(item => {return item.estateId});
          this.checkedElevators = this.elevators.map(item => {return item.elevatorId});
        } else {
          this.checkedCounties = [];
          this.checkedVillages = [];
          this.checkedEstates = [];
          this.checkedElevators = [];
        }

        levelCity.counties.forEach((county, index) => {
          this.$set(county, 'checked', checked);
          this.$set(county, 'indeterminate', false);

          if (county.villages && county.villages.length) {
            county.villages.forEach((village, index) => {
              this.$set(village, 'checked', checked);
              this.$set(village, 'indeterminate', false);

              if (village.estates && village.estates.length) {
                village.estates.forEach((estate, index) => {
                  this.$set(estate, 'checked', checked);
                  this.$set(estate, 'indeterminate', false);

                  if (estate.elevators && estate.elevators.length) {
                    estate.elevators.forEach((item, index) => {
                      this.$set(item, 'checked', checked);
                      this.$set(item, 'indeterminate', false);
                    });
                  }
                });
              }
            });
          }
        });

        this.counties.forEach((county, index) => {
          this.$set(county, 'checked', checked);
          this.$set(county, 'indeterminate', false);

          if (county.villages && county.villages.length) {
            county.villages.forEach((village, index) => {
              this.$set(village, 'checked', checked);
              this.$set(village, 'indeterminate', false);

              if (village.estates && village.estates.length) {
                village.estates.forEach((estate, index) => {
                  this.$set(estate, 'checked', checked);
                  this.$set(estate, 'indeterminate', false);

                  if (estate.elevators && estate.elevators.length) {
                    estate.elevators.forEach((item, index) => {
                      this.$set(item, 'checked', checked);
                      this.$set(item, 'indeterminate', false);
                    });
                  }
                });
              }
            });
          }
        });

        this.originCounties = JSON.parse(JSON.stringify(levelCity.counties));
      } else {
        if (levelCity.counties && levelCity.counties.length) {
          levelCity.counties.forEach((county, index) => {
            this.$set(county, 'checked', checked);
            this.$set(county, 'indeterminate', false);

            if (county.villages && county.villages.length) {
              county.villages.forEach((village, index) => {
                this.$set(village, 'checked', checked);
                this.$set(village, 'indeterminate', false);

                if (village.estates && village.estates.length) {
                  village.estates.forEach((estate, index) => {
                    this.$set(estate, 'checked', checked);
                    this.$set(estate, 'indeterminate', false);

                    if (estate.elevators && estate.elevators.length) {
                      estate.elevators.forEach((item, index) => {
                        this.$set(item, 'checked', checked);
                        this.$set(item, 'indeterminate', false);
                      });
                    }
                  });
                }
              });
            }
          });
        } else {
          this.loading = true;

          elevatorSelect({
            cityId: cityId,
          }).then(res => {
            if (this.cities.length) {
              // 切换城市，追加新切换城市数据
              const levelCity = this.cities.find(item => item.cityId === cityId);
              const match = res.data.find(item => item.cityId === cityId);

              if (match && match.counties) {
                this.$set(levelCity,'counties', res.data.find(item => item.cityId === cityId).counties);
              } else {
                this.$message.error(`城市数据 ${levelCity.cityName} 查询失败`);

                return;
              }
            }

            // 在后台把所有城市数据都勾选
            levelCity.counties.forEach((county, index) => {
              this.$set(county, 'checked', checked);
              this.$set(county, 'indeterminate', false);

              if (county.villages && county.villages.length) {
                county.villages.forEach((village, index) => {
                  this.$set(village, 'checked', checked);
                  this.$set(village, 'indeterminate', false);

                  if (village.estates && village.estates.length) {
                    village.estates.forEach((estate, index) => {
                      this.$set(estate, 'checked', checked);
                      this.$set(estate, 'indeterminate', false);

                      if (estate.elevators && estate.elevators.length) {
                        estate.elevators.forEach((item, index) => {
                          this.$set(item, 'checked', checked);
                          this.$set(item, 'indeterminate', false);
                        });
                      }
                    });
                  }
                });
              }
            });

            this.loading = false;
          }).catch(err => {
            this.$message.error("系统异常，请稍后再试");
          })
        }

        this.originCounties = JSON.parse(JSON.stringify(levelCity.counties));
      }
    },
    clickCityItemName(cityItem) {
      this.cities.forEach((item, index) => {
        if (item.cityId === cityItem.cityId) {
          this.$set(this.cities[index], 'clicked', true);
        } else {
          this.$set(this.cities[index], 'clicked', false);
        }
      });

      this.queryCity(cityItem);
    },
    queryCity(cityItem) {
      this.currentCity = cityItem;
      this.listCities(cityItem.cityId);
    },
    resetCounty() {
      this.counties = [];
      this.originCounties = [];
      this.currentCounty = null;
      this.searchCounty = '';
    },
    resetVillage() {
      this.villages = [];
      this.originVillages = [];
      this.currentVillage = null;
      this.searchVillage = '';
    },
    resetEstate() {
      this.estates = [];
      this.originEstates = [];
      this.currentEstate = null;
      this.searchEstate = '';
    },
    resetElevator() {
      this.elevators = [];
      this.originElevators = [];
      this.currentElevator = null;
      this.searchElevator = '';
    },
    // 获取城市数据
    listCities(cityId, requestData) {
      if (this.cities.length) {
        const levelCity = this.cities.find(item => item.cityId === cityId);

        if (levelCity.counties && levelCity.counties.length) {
          // 已有城市数据，不再请求接口
          console.log(`已有城市 ${levelCity.cityName} 数据，不再请求接口`);
          this.renderCity(cityId);

          return;
        }
      }

      let params = {
        cityId: (typeof(cityId)==='undefined' || (!cityId)) ? null : cityId,
      };

      if (requestData && requestData.length && this.showElevator) {
        params['elevatorIds'] = requestData;
      }

      if (requestData && requestData.length && !this.showElevator) {
        params['estateIds'] = requestData;
      }

      elevatorSelect(params).then(res => {
        if (this.cities.length) {
          // 切换城市，追加新切换城市数据
          const levelCity = this.cities.find(item => item.cityId === cityId);
          const match = res.data.find(item => item.cityId === cityId);

          if (match && match.counties) {
            this.$set(levelCity,'counties', res.data.find(item => item.cityId === cityId).counties);
          } else {
            this.$message.error(`城市数据 ${levelCity.cityName} 查询失败`);

            return;
          }
        } else {
          // 新增，进入时初始化
          this.cities = res.data;
        }

        this.renderCity(cityId);
      }).catch(err => {
        this.$message.error("系统异常，请稍后再试");
      })

      return;
    },
    renderCity(cityId) {
      this.resetCounty();
      this.resetVillage();
      this.resetEstate();
      this.resetElevator();

      const levelCity = this.cities.find(item => item.cityId === (typeof(cityId)==='undefined' ? this.cities[0].cityId : cityId));
      const levelCounty = levelCity.counties[0];
      const levelVillage = levelCounty.villages[0];

      this.currentCity = levelCity;
      this.currentCounty = levelCounty;
      this.currentVillage = levelVillage;

      this.counties = levelCity.counties;
      this.villages = levelCounty.villages;

      this.checkedCounties = levelCity.counties.filter(item => item.checked === true).map(item => {return item.cityId});
      this.checkedVillages = levelCounty.villages.filter(item => item.checked === true).map(item => {return item.cityId});

      this.originCounties = JSON.parse(JSON.stringify(this.counties));
      this.originVillages = JSON.parse(JSON.stringify(this.villages));

      // 高亮
      this.cities.forEach(item => {
        if (item.cityId === levelCity.cityId) {
          this.$set(item, 'clicked', true);
        } else {
          this.$set(item, 'clicked', false);
        }
      });

      levelCity.counties.forEach(item => {
        if (item.cityId === levelCounty.cityId) {
          this.$set(item, 'clicked', true);
        } else {
          this.$set(item, 'clicked', false);
        }
      });

      levelCounty.villages.forEach(item => {
        if (item.cityId === levelVillage.cityId) {
          this.$set(item, 'clicked', true);
        } else {
          this.$set(item, 'clicked', false);
        }
      });

      if (levelVillage.estates && levelVillage.estates.length) {
        const levelEstate = levelVillage.estates[0];

        this.currentEstate = levelEstate;
        this.estates = levelVillage.estates;
        this.originEstates = JSON.parse(JSON.stringify(this.estates));
        this.checkedEstates = levelVillage.estates.filter(item => item.checked === true).map(item => {return item.estateId});

        levelVillage.estates.forEach(item => {
          if (item.estateId === levelEstate.estateId) {
            this.$set(item, 'clicked', true);
          } else {
            this.$set(item, 'clicked', false);
          }
        });

        if (levelEstate.elevators && levelEstate.elevators.length) {
          this.elevators = levelEstate.elevators;
          this.originElevators = JSON.parse(JSON.stringify(this.elevators));
          this.checkedElevators = levelEstate.elevators.filter(item => item.checked === true).map(item => {return item.elevatorId});
        }
      }

      // 针对单选时的特殊回显处理
      if ((!this.multiple) && this.queryIds.length && this.firstMounted) {
        const levelCity = this.cities.find(item => item.cityId === (typeof(cityId)==='undefined' ? this.cities[0].cityId : cityId));
        const levelCounty = levelCity.counties.find(item => item.indeterminate === true);
        let levelVillage = null;
        let levelEstate = null;
        let levelElevator = null;

        if (levelCounty && levelCounty.villages && levelCounty.villages.length) {
          levelVillage = levelCounty.villages.find(item => item.indeterminate === true);
          levelEstate = levelVillage.estates.find(item => item.indeterminate === true);

          if (levelEstate && levelEstate.elevators && levelEstate.elevators.length) {
            levelElevator = levelEstate.elevators.find(item => item.checked === true);
          } else {
            this.$message.error('未能定位到选中的电梯，请手动选择');

            return;
          }
        } else {
          this.$message.error('未能定位到电梯所属区/县，请手动选择');

          return;
        }

        this.currentCity = levelCity;
        this.currentCounty = levelCounty;
        this.currentVillage = levelVillage;
        this.currentEstate = levelEstate;
        this.currentElevator = levelElevator;

        this.counties = levelCity.counties;
        this.villages = levelCounty.villages;
        this.estates = levelVillage.estates;
        this.elevators = levelEstate.elevators;

        levelCity.counties.forEach(item => {
          if (item.cityId === levelCounty.cityId) {
            this.$set(item, 'clicked', true);
            this.$set(item, 'checked', true);
          } else {
            this.$set(item, 'clicked', false);
            this.$set(item, 'checked', false);
          }
        });

        levelCounty.villages.forEach(item => {
          if (item.cityId === levelVillage.cityId) {
            this.$set(item, 'clicked', true);
            this.$set(item, 'checked', true);
          } else {
            this.$set(item, 'clicked', false);
            this.$set(item, 'checked', false);
          }
        });

        levelVillage.estates.forEach(item => {
          if (item.estateId === levelEstate.estateId) {
            this.$set(item, 'clicked', true);
            this.$set(item, 'checked', true);
          } else {
            this.$set(item, 'clicked', false);
            this.$set(item, 'checked', false);
          }
        });

        levelEstate.elevators.forEach(item => {
          if (item.elevatorId === levelElevator.elevatorId) {
            this.$set(item, 'clicked', true);
            this.$set(item, 'checked', true);
          } else {
            this.$set(item, 'clicked', false);
            this.$set(item, 'checked', false);
          }
        });

        this.firstMounted = false;
      }
    },
    scrollLeft() {
      // scrollWidth是元素的整个宽度，包括溢出宽度。offsetWidth只是元素可见宽度，不包括溢出宽度。
      const scrollbar = this.$refs['cityScrollBar'].wrap;
      const scrollContent = document.querySelector('.scroll-content-wrapper');

      // 内容宽度比滚动区域小，不需要左右滚动。
      if (scrollContent.scrollWidth <= scrollbar.offsetWidth) {
        return;
      }

      this.disableScrollRight = false;

      // 滚动到了第一条数据, 左箭头灰色, 使用scrollbar.scrollLeft <= scrollbar.offsetWidth 而不是 scrollbar.scrollLeft===0 是为了让左箭头按到能看到左边第一条数据就置灰
      if (scrollbar.scrollLeft <= scrollbar.offsetWidth) {
        this.disableScrollLeft = true;
      } else {
        this.disableScrollLeft = false;
      }

      let scrollbarSpace = scrollbar.scrollLeft - scrollbar.offsetWidth;
      scrollbar.scrollLeft = scrollbarSpace <= 0 ? 0 : scrollbarSpace;
    },
    scrollRight() {
      // scrollWidth是元素的整个宽度，包括溢出宽度。offsetWidth只是元素可见宽度，不包括溢出宽度。
      const scrollbar = this.$refs['cityScrollBar'].wrap;
      const scrollContent = document.querySelector('.scroll-content-wrapper');

      // 内容宽度比滚动区域小，不需要左右滚动。
      if (scrollContent.scrollWidth <= scrollbar.offsetWidth) {
        return;
      }

      this.disableScrollLeft = false;

      // 滚动到了最后一条数据，右箭头灰色。使用（scrollbar.scrollWidth - scrollbar.offsetWidth) 而不是 scrollbar.scrollWidth 是为了让右箭头按到只要能把最后数据看完的时候就置灰
      if (scrollbar.scrollLeft + scrollbar.offsetWidth >= (scrollbar.scrollWidth - scrollbar.offsetWidth)) {
        this.disableScrollRight = true;
      } else {
        this.disableScrollRight = false;
      }

      let scrollbarSpace = scrollbar.scrollLeft + scrollbar.offsetWidth;
      scrollbar.scrollLeft = scrollbarSpace >= scrollbar.scrollWidth ? scrollbar.scrollWidth : scrollbarSpace;
    },
    handleSearchCounty() {
      if (this.searchCounty == '') {
        this.counties = JSON.parse(JSON.stringify(this.originCounties));
      } else {
        this.counties = this.originCounties.filter((item) => {
          return item.cityName.includes(this.searchCounty);
        });
      }

      this.counties.forEach((item, index) => {
        if (item.cityId === this.currentCounty.cityId) {
          this.$set(this.counties[index], 'clicked', true);
        } else {
          this.$set(this.counties[index], 'clicked', false);
        }
      });
    },
    handleSearchVillage() {
      if (this.searchVillage == '') {
        this.villages = JSON.parse(JSON.stringify(this.originVillages));
      } else {
        this.villages = this.originVillages.filter((item) => {
          return item.cityName.includes(this.searchVillage);
        });
      }

      this.villages.forEach((item, index) => {
        if (item.cityId === this.currentVillage.cityId) {
          this.$set(this.villages[index], 'clicked', true);
        } else {
          this.$set(this.villages[index], 'clicked', false);
        }
      });
    },
    handleSearchEstate() {
      if (this.searchEstate == '') {
        this.estates = JSON.parse(JSON.stringify(this.originEstates));
      } else {
        this.estates = this.originEstates.filter((item) => {
          return item.estateName.includes(this.searchEstate);
        });
      }

      let matched = this.estates.find(item => item.estateId === this.currentEstate.estateId);

      if (matched) {
        this.$set(matched, 'clicked', true);
      }

      this.estates.forEach((item, index) => {
        if (item.estateId === this.currentEstate.estateId) {
          this.$set(this.estates[index], 'clicked', true);
        } else {
          this.$set(this.estates[index], 'clicked', false);
        }
      });
    },
    handleSearchElevator() {
      if (this.searchElevator == '') {
        this.elevators = JSON.parse(JSON.stringify(this.originElevators));
      } else {
        this.elevators = this.originElevators.filter((item) => {
          return item.elevatorName.includes(this.searchElevator);
        });
      }

      // 设置查询后数据的勾选状态
      this.checkedElevators = this.originElevators.filter(item => item.checked === true).map(item => {return item.elevatorId});

      console.log('this.eles:', this.elevators, 'chedkel:', this.checkedElevators)
    },
  }
};
</script>

<style lang="scss" scoped>
  .scroll-right, .scroll-left {
    cursor: pointer;
  }

  .disable-scroll-right, .disable-scroll-left {
    color: #e0e0e0;
    cursor: not-allowed;
  }

  .scroll-content-wrapper {
    white-space: nowrap;

    ::v-deep .el-checkbox__label {
      padding-left: 0;

      span {
        padding-left: 10px;
        display: block;
      }

      .clicked {
        color: #409EFF;
      }
    }

    ::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
      color: unset;
    }
  }

  .select-columns.columns3 {
    justify-content: space-between;

    & > div {
      width: 417px;
    }
  }

  .select-columns.columns4 {
    justify-content: space-between;

    & > div {
      width: 313px;
    }
  }

  .column-srcoll-wrapper {
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .column-item-wrapper {
    display: block;
    margin: 15px 10px;
    margin-right: 4px;

    ::v-deep .el-checkbox__label {
      padding-left: 0;
      width: calc(100% - 6px);
      vertical-align: middle;

      span {
        padding-left: 10px;
        display: block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .clicked {
        color: #409EFF;
      }
    }

    ::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
      color: unset;
    }
  }

  .empty-list {
    height: 300px;
    text-align: center;
    padding-top: 16px;
  }

  .column-item-wrapper.highlighted {
    background: rgba(38, 132, 246, .1);
  }

  .el-scrollbar__wrap {
    overflow-y: hidden;
  }

  .el-scrollbar__bar.is-vertical {
    display: none;
  }



  .flex-display {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }

  .area_toolbar {
    height: 100%;
    border: 1px solid lightgray;
    border-radius: 4px;

    .list {
      width: 100%;
      height: 100%;
    }

    ::v-deep .el-input__suffix {
      margin-right: 6px;
    }
  }

  .title-wrapper {
    border-bottom: 1px solid #DCDFE6;
    width: 100%;
    height: 40px;
    margin-bottom: 15px;
  }

  .title-label {
    font-family: Source Han Sans;
    font-size: 14px;
    font-weight: normal;
    line-height: 40px;
    padding-left: 10px;
    color: #303133;
  }

  // .el-table__body tr.current-row>td {
  //   background-color: #111111;
  // }

  // 点击后背景颜色和文本颜色
  ::v-deep .rowStyle {
    background-color: #e8f7fd !important;
    color: #1890ff;
    margin: 10px;
  }

  // 鼠标滑过背景颜色
  ::v-deep .el-table tbody tr:hover>td {
    background-color: #e8f7fd !important;

    margin: 10px;
  }

  .single-city {
    padding: 2px 4px;
    margin: 0 12px;
    cursor: pointer;

    span.clicked {
      color: #0D48CE;
    }
  }

  .single-list {
    cursor: pointer;
    width: calc(100% - 20px);
    height: 20px;
    margin: 15px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    span {
      display: block;
      width: 100%;
      height: 100%;
      line-height: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    span.clicked {
      color: #0D48CE;
    }
  }

  .single-list.highlighted {
    background: rgba(38, 132, 246, .1);
  }
</style>
